<template>
	<div class="background-image" ref="backgroundDiv" :style="{ backgroundImage: `url(${backgroundDiv})` }">
		<div v-if="isRepeatModel" class="shadow"></div>
		<!-- <div class="back-wrap"> -->
		<img :src="backImage" alt="" class="back" @click="goBack" />
		<!-- </div> -->
		<div class="content">
			<div class="left">
				<!-- <div class="title">
					<div class="imgbook">
						<img :src="image" alt="" class="topbook" />
					</div>
					<div class="title-box">
						<div class="titlebook font1">{{ text }}</div>
						<div class="titlebook font1">{{ label }}</div>
						<div class="titlecenter font2">{{ name }}</div>
					</div>
				</div> -->

				<div class="audio-article" id="home_article1">
					<img :src="image" alt="" />
					<div class="section">
						<p class="color1 font1">{{ text }}</p>
						<p class="color1 font1">{{ label }}</p>
						<p class="color2 font2">{{ name }}</p>
						<button class="font2" style="background-color:rgb(35, 192, 90); visibility: hidden;">简介</button>
						<p style="visibility: hidden;" class="color3 font2">{{ isbn }}</p>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-box" @scroll="handleScroll" ref="scrollContainer">
					<ul class="ul">
						<div v-for="(unit, unitIndex) in visiblePlaylist" :key="unitIndex">
							<div class="unit">
								<span v-html="unit.unit"></span>
								<img v-show="gradeId == 31 || gradeId == 71" src="../public/assets/bookAudio/download.png" alt=""
									class="download" @click="downloadCurrentUnit(unit)" />
							</div>
							<li v-for="(audio, index) in unit.audios" :key="index" @click="togglePlay(unitIndex, index)"
								:class="['information', { active: gradeType === 'primary' && selectedIndex === index && currentUnitIndex === unitIndex, active2: gradeType === 'middle' && selectedIndex === index && currentUnitIndex === unitIndex }]">
								<div class="information-box">
									<div>
										<div class="lyric" v-html="audio.title"></div>
										<div class="time">
											<div class="audio-time">
												<img src="../public/assets/bookAudio/timeimg.png" alt="" class="imgtime" />
												{{ audio.duration }}
											</div>
										</div>
									</div>
									<div>
										<img :src="isPlaying && selectedIndex === index && currentUnitIndex === unitIndex ? `${pauseimg2}` : `${startimg2}`"
											alt="" class="list-play" />
										<!-- <img @click.stop="togglePlay(unitIndex, index)" :src="isPlaying && selectedIndex === index && currentUnitIndex === unitIndex ? `${pauseimg2}` : `${startimg2}`" alt="" class="Previousstep" /> -->
									</div>
								</div>
							</li>
						</div>
					</ul>
				</div>
			</div>
		</div>
		<div class="btn">
			<div v-if="!isRepeatModel" class="btn-box">
				<div class="btn-box-left">
					<div class="btn-wrap btn-wrap1">
						<img @click="rewind" src="../public/assets/bookAudio/tui.png" alt="" class="fastforward" />
					</div>
					<div class="btn-wrap">
						<img @click="playPrevious" :src="previousstepImage" alt="" class="previousstep" />
					</div>
					<div class="btn-wrap">
						<img @click="togglePlay(currentUnitIndex, currentIndex)"
							:src="isPlaying ? `${pauseimg}` : `${startimg}`" alt="" class="togglePlay" />
					</div>
					<div class="btn-wrap">
						<img @click="playNext(false)" :src="NextsongImage" alt="" class="previousstep" />
					</div>
					<div class="btn-wrap btn-wrap1">
						<img @click="fastForward" src="../public/assets/bookAudio/fastforward.png" alt="" class="fastforward" />
					</div>
				</div>

				<div class="progress-container-box">
					<div class="progress-time">
						<div class="progress-text" v-html="currentAudio?.audios[currentIndex]?.title"></div>
						<div class="progress-text">{{ formatTime(currentTime) }}/{{ formatTime(currentDuration) }}</div>
					</div>
					<AudioProgress class="audio-progress" :progress="progress" @setProgress="setProgress">
					</AudioProgress>
				</div>

				<div class="btn-box-right">
					<div @click="toggleOrderMode" class="button-wrap button-wrap1">
						<img :src="RepeatingImage" alt="" class="orderImg" />
						<span>{{ isRepeating ? "循环" : "顺序" }}</span>
					</div>
					<div @click="playbackRate" class="button-wrap button-wrap2">
						<img :src="playbackRateImage" alt="" class="orderImg" />
						<span>倍速</span>
					</div>
					<div @click="playRepeatMode" class="button-wrap button-wrap3">
						<img src="../public/assets/bookAudio/repeat.png" alt="" class="orderImg" />
						<span>复读</span>
					</div>
				</div>

			</div>
			<div v-else class="btn-box1">
				<RepeatProgress class="repeat-progress" :duration="currentDuration" @upDateRepeatTime="upDateRepeatTime">
				</RepeatProgress>
				<div class="btn-box-right">
					<img @click="repeatModelPlay()" :src="isrePeatPlaying ? `${pauseimg}` : `${startimg}`" alt=""
						class="repeatTogglePlay repeatTogglePlay1" />
					<img @click="repeatModelExit()" :src="exitRepeatImage" alt="" class="repeatTogglePlay" />
				</div>
			</div>
		</div>
		<audio ref="audio" controlslist="nodownload noplaybackrate" :src="currentAudio?.audios[currentIndex].url"
			@timeupdate="updateProgress" @loadedmetadata="updateDuration" @ended="handleAudioEnd" @pause="handleAudioPause"
			class="audio" style="display: none"></audio>
	</div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getimginterface, getBookAudiolist } from "../api/expression.js";
import AudioProgress from "../component/audioProgress/index.vue"
import RepeatProgress from "../component/repeatProgress/index.vue"
//export default {
//	setup() {
const router = useRouter(); // 获取路由实例
const route  = useRoute();
// const { gradeId } = route.query;

let gradeId = window.gradeId;
let gradeType = window.gradeId > 61 ? 'middle' : 'primary';

const playlist = ref([]); // 引用音频列表
const currentUnitIndex = ref(0); // 当前单元索引
const currentIndex = ref(0); // 当前音频索引
const selectedIndex = ref(0); // 默认选中第一个音频
const audioUnitCount = ref(0); // 音频单元数量
const isPlaying = ref(false);
const progress = ref(0);
const audio = ref(null);
const isRepeating = ref(false); // 新增状态，控制复读模式
// const gradeType = localStorage.getItem("gradeType");
// const gradeId = localStorage.getItem("gradeId");
const text = ref("");
const label = ref("");
const name = ref("");
const isbn = ref("");
const image = ref("");
const backgroundDiv = ref(null); // 使用 ref 来引用背景元素
const backImage = ref(null);
const previousstepImage = ref(null);
const pauseimg = ref(null);
const startimg = ref(null);
const pauseimg2 = ref(null);
const startimg2 = ref(null);
const NextsongImage = ref(null);
const RepeatingImage = ref(null);
const playbackRateImage = ref(null);
const currentAudio = ref();
const visibleCount = ref(1); // 初始可见音频单元数量
const visiblePlaylist = ref();
const visibleCountFlag = ref(false);

const currentTime = ref(0); // 当前播放时间
const currentDuration = ref(0); // 当前音频总时长

const currentPlaybackRate = ref(1);
const isRepeatModel = ref(false);
const isrePeatPlaying = ref(false);
const exitRepeatImage = ref(null);
const repeatStartTime = ref(0);
const repeatEndTime = ref(0);

const handleScroll = async event => {
	const { scrollTop, scrollHeight, clientHeight } = event.target;
	if (scrollTop + clientHeight >= scrollHeight - 10) {
		visibleCount.value += 1; // 每次滚动加载1个音频单元
		if (visibleCountFlag.value) {
			visibleCountFlag.value = false;
		} else {
			visiblePlaylist.value = playlist.value.slice(0, visibleCount.value);
		}
	}
};

const ensureAudioVisible = (unitIndex, index) => {
	let preCount = playlist.value.reduce((pre, cur, idx) => {
		if (idx < unitIndex) {
			pre += cur.audios.length;
		}
		return pre;
	}, 0);
	const audioElementIndex = index + preCount;

	// const audioElementIndex = index + unitIndex * currentAudio.value.audios.length;
	const audioElements = document.querySelectorAll(".information");

	if (audioElementIndex >= visibleCount.value) {
		visibleCount.value = Math.min(audioElementIndex + 1, playlist.value.length);
	}

	const currentAudioElement = audioElements[audioElementIndex];
	if (currentAudioElement) {
		currentAudioElement.scrollIntoView({ behavior: "smooth", block: "center" });
	}
	if (!visibleCountFlag.value) {
		visiblePlaylist.value = playlist.value.slice(0, visibleCount.value);
		visibleCountFlag.value = true;
	} else {
		visibleCountFlag.value = false;
	}
};

const fastForward = () => {
	if (audio.value) {
		audio.value.currentTime = Math.min(audio.value.duration, audio.value.currentTime + 15); // 快进15秒
	}
};

const rewind = () => {
	if (audio.value) {
		audio.value.currentTime = Math.max(0, audio.value.currentTime - 15); // 快退15秒
	}
};

const playAudio = (unitIndex, index) => {
	currentUnitIndex.value = unitIndex; // 更新当前单元索引
	currentIndex.value = index; // 更新当前音频索引
	selectedIndex.value = index; // 更新选中的索引

	ensureAudioVisible(unitIndex, index); // 确保当前音频可见

	// if (isPlaying.value) {
	// 	audio.value.pause(); // 暂停当前音频
	// }
	audio.value.pause(); // 暂停当前音频

	currentAudio.value = playlist.value[currentUnitIndex.value];
	audio.value.src = currentAudio.value.audios[currentIndex.value].url; // 更新音频源
	audio.value.currentTime = 0; // 重置进度
	audio.value.load();
	audio.value.onloadedmetadata = () => { // 确保音频元数据加载完毕
		// audio.value.play().then(() => {
		// 	isPlaying.value = true; // 播放成功后更新状态
		// }).catch(error => {
		// 	console.error("播放音频时出错:", error);
		// });
		audio.value.play()
		isPlaying.value = true; // 播放成功后更新状态

	};

	// setTimeout(() => {
	// 	audio.value
	// 		.play()
	// 		.then(() => {
	// 			isPlaying.value = true; // 播放成功后更新状态
	// 			ensureAudioVisible(unitIndex, index); // 确保当前音频可见
	// 		})
	// 		.catch(error => {
	// 			console.error("播放失败:", error);
	// 		});
	// }, 100);
};

const togglePlay = (unitIndex, index) => {
	// 播放暂停的是当前的文件
	if (currentUnitIndex.value === unitIndex && currentIndex.value === index) {
		if (!audio.value.paused) {
			audio.value.pause(); // 暂停当前音频
			isPlaying.value = false;
		} else {
			audio.value.play(); // 继续播放当前音频
			isPlaying.value = true;
		}
	} else {
		playAudio(unitIndex, index);
	}
	// if (audio.value) {
	// 	if (isPlaying.value && currentUnitIndex.value === unitIndex && currentIndex.value === index) {
	// 		audio.value.pause(); // 暂停当前音频
	// 		isPlaying.value = false; // 更新播放状态
	// 	} else {
	// 		playAudio(unitIndex, index);
	// 	}
	// }
};

const playPrevious = () => {
	let flag = false;
	if (currentIndex.value > 0) {
		currentIndex.value--;
		flag = true;
	} else {
		if (currentUnitIndex.value > 0) {
			currentUnitIndex.value--;
			currentIndex.value = playlist.value[currentUnitIndex.value].audios.length - 1;
			flag = true;
		}
	}
	//	currentAudio.value = playlist.value[currentUnitIndex.value];
	if (flag) {
		playAudio(currentUnitIndex.value, currentIndex.value);
	}
};

const playNext = (isAudioEnd) => {
	let flag = false;
	if (currentIndex.value < currentAudio.value.audios.length - 1) {
		currentIndex.value++;
		flag = true;
	} else {
		if (currentUnitIndex.value < playlist.value.length - 1) {
			currentUnitIndex.value++;
			currentIndex.value = 0;
			flag = true;
		}
	}
	//	currentAudio.value = playlist.value[currentUnitIndex.value];
	if (flag) {
		playAudio(currentUnitIndex.value, currentIndex.value);
	} else {
		if (isAudioEnd) {
			audio.value.pause(); // 暂停当前音频
			audio.value.currentTime = 0; // 重置进度
			isPlaying.value = false;
		}
	}
};

const handleAudioEnd = () => {
	if (isRepeating.value) {
		// playAudio(currentUnitIndex.value, currentIndex.value);
		isPlaying.value = true;
		audio.value.currentTime = 0; // 重置进度
		audio.value.play(); // 继续播放当前音频
	} else {
		markAsLearned();
		playNext(true);
	}
};

const handleAudioPause = () => {
	isPlaying.value = false;
}

const markAsLearned = () => {
	currentAudio.value.audios[currentIndex.value].learned = true;
};

const setProgress = (val) => {
	if (audio.value && audio.value.duration) {
		audio.value.currentTime = val * audio.value.duration;
		currentTime.value = Math.round(audio.value.currentTime); // 四舍五入当前时间
	}
}

const updateProgress = () => {
	if (isRepeatModel.value) { // 复读模式
		if (audio.value.currentTime >= repeatEndTime.value) {
			audio.value.currentTime = repeatStartTime.value;
		}
	}

	if (audio.value && audio.value.duration) {
		progress.value = audio.value.currentTime / audio.value.duration;
		currentTime.value = Math.round(audio.value.currentTime); // 四舍五入当前时间

		// console.log('audio.value.currentTime',audio.value.currentTime);
	}
};

const updateDuration = () => {
	if (audio.value) {
		currentDuration.value = Math.round(audio.value.duration); // 四舍五入总时长
	}
};

function updateBackground() {
	if (backgroundDiv.value) {
		if (gradeType === "primary") {
			backgroundDiv.value = new URL(`../public/assets/bookAudio/beijing.png`, import.meta.url).href;
			backImage.value = new URL(`../public/assets/bookAudio/back.png`, import.meta.url).href;
			previousstepImage.value = new URL(`../public/assets/bookAudio/Previousstep.png`, import.meta.url).href;
			pauseimg.value = new URL(`../public/assets/bookAudio/pauseimg.png`, import.meta.url).href;
			startimg.value = new URL(`../public/assets/bookAudio/start.png`, import.meta.url).href;
			pauseimg2.value = new URL(`../public/assets/bookAudio/pauseimg.png`, import.meta.url).href;
			startimg2.value = new URL(`../public/assets/bookAudio/start.png`, import.meta.url).href;
			NextsongImage.value = new URL(`../public/assets/bookAudio/Nextsong.png`, import.meta.url).href;
			exitRepeatImage.value = new URL(`../public/assets/bookAudio/repeatimg.png`, import.meta.url).href;
		} else {
			backgroundDiv.value = new URL(`../public/assets/bookAudio/middleschool.png`, import.meta.url).href;
			backImage.value = new URL(`../public/assets/bookAudio/back2.png`, import.meta.url).href;
			previousstepImage.value = new URL(`../public/assets/bookAudio/Previousstep2.png`, import.meta.url).href;
			pauseimg.value = new URL(`../public/assets/bookAudio/pauseimg2.png`, import.meta.url).href;
			startimg.value = new URL(`../public/assets/bookAudio/start2.png`, import.meta.url).href;
			pauseimg2.value = new URL(`../public/assets/bookAudio/pauseimg3.png`, import.meta.url).href;
			startimg2.value = new URL(`../public/assets/bookAudio/start3.png`, import.meta.url).href;
			NextsongImage.value = new URL(`../public/assets/bookAudio/Nextsong2.png`, import.meta.url).href;
			exitRepeatImage.value = new URL(`../public/assets/bookAudio/repeatimg1.png`, import.meta.url).href;
		}
	}
}

const downloadCurrentUnit = unit => {
	if (unit && unit.file_url) {
		const link = document.createElement("a");
		link.href = unit.file_url;
		link.download = `${unit.unit}.zip`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	} else {
		console.error("当前单元没有可下载的文件");
	}
};

const toggleOrderMode = () => {
	isRepeating.value = !isRepeating.value;
	if (isRepeating.value) {
		RepeatingImage.value = new URL(`../public/assets/bookAudio/loopPlayback.png`, import.meta.url).href;
	} else {
		RepeatingImage.value = new URL(`../public/assets/bookAudio/order.png`, import.meta.url).href;
	}
};

const playbackRate = () => {
	if (currentPlaybackRate.value == 1) {
		currentPlaybackRate.value += 0.25;
		playbackRateImage.value = new URL(`../public/assets/bookAudio/multiple2.png`, import.meta.url).href;
	} else if (currentPlaybackRate.value == 1.25) {
		currentPlaybackRate.value -= 0.5;
		playbackRateImage.value = new URL(`../public/assets/bookAudio/multiple3.png`, import.meta.url).href;
	} else if (currentPlaybackRate.value == 0.75) {
		currentPlaybackRate.value += 0.25;
		playbackRateImage.value = new URL(`../public/assets/bookAudio/multiple1.png`, import.meta.url).href;
	}
	audio.value.playbackRate = currentPlaybackRate.value;
}

const playRepeatMode = () => {
	isRepeatModel.value = !isRepeatModel.value;
	audio.value.pause();
	repeatStartTime.value = 0;
	repeatEndTime.value = audio.value.duration;
}

const repeatModelPlay = () => {
	if (!audio.value.paused) {
		audio.value.pause(); // 暂停当前音频
		isrePeatPlaying.value = false;
	} else {
		if (!repeatStartTime.value) {
			repeatStartTime.value = 0;
		}
		if (!repeatEndTime.value) {
			repeatEndTime.value = audio.value.duration;
		}
		audio.value.currentTime = repeatStartTime.value;
		audio.value.play(); // 继续播放当前音频
		isrePeatPlaying.value = true;
	}
}

const repeatModelExit = () => {
	isRepeatModel.value = false;
	audio.value.pause();
	isrePeatPlaying.value = false;
}

const upDateRepeatTime = (start, end) => {
	repeatStartTime.value = start * audio.value.duration;
	repeatEndTime.value = end * audio.value.duration;

	audio.value.pause();
	isrePeatPlaying.value = false;
}

const getimgDetail = async (gradeId) => {
	try {
		const res = await getimginterface(gradeId);
		text.value = res.data.title;
		label.value = res.data.label;
		name.value = res.data.name;
		isbn.value = res.data.isbn;
		image.value = res.data.image;
		// image.value = new URL(res.data.image, import.meta.url).href;
		// console.log('image.value',image.value);
	} catch (error) {
		console.error(error);
	}
};

const getAudiolist = async value => {
	try {
		const res = await getBookAudiolist(value);
		console.log('aaaaa', res);

		playlist.value.push({
			id: value,
			unit: res.text,
			file_url: res.file_url,
			audios: res.data.map(item => ({
				title: item.title,
				url: item.url,
				learned: item.learned,
				duration: item.duration,
				loaded: false
			})),
		});
		audioUnitCount.value = res.total_page;
		visiblePlaylist.value = playlist.value.slice(0, visibleCount.value);
		currentAudio.value = playlist.value[currentUnitIndex.value]

		nextTick(() => {
			playAudio(0, 0);
		});

		setTimeout(async () => {
			for (let i = 2; i <= audioUnitCount.value; i++) {
				const res = await getBookAudiolist(i);
				playlist.value.push({
					id: i,
					unit: res.text,
					file_url: res.file_url,
					audios: res.data.map(item => ({
						title: item.title,
						url: item.url,
						learned: item.learned,
						duration: item.duration,
						loaded: false
					})),
				});
			}
			if (playlist.value[0].audios.length < 10) {
				visibleCount.value = 2;
				visiblePlaylist.value = playlist.value.slice(0, visibleCount.value);
				currentAudio.value = playlist.value[currentUnitIndex.value]
			}
		});
	} catch (error) {
		console.error(error);
	}
};

onMounted(() => {
	// audio.value = document.querySelector("audio");
	// audio.value.addEventListener("timeupdate", updateProgress);
	// audio.value.addEventListener("loadedmetadata", updateDuration); // 监听音频元数据加载完成
	console.log('=======',gradeId);
	updateBackground();
	getimgDetail(gradeId);
	getAudiolist(1);
	RepeatingImage.value = new URL(`../public/assets/bookAudio/order.png`, import.meta.url).href;
	playbackRateImage.value = new URL(`../public/assets/bookAudio/multiple1.png`, import.meta.url).href;
});
const goBack = () => {
	router.go(-1);
};

const formatTime = time => {
	if (isNaN(time) || time < 0) return "00:00"; // 确保时间为有效数字且为正
	const minutes = Math.floor(time / 60);
	const seconds = Math.floor(time % 60);
	return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
};

</script>

<style scoped>
.background-image {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	/* background-position: center; */
	/* transition: background-image 1s ease-in-out; */
	/* 动画过渡效果 */
	/* padding-top: 1%; */
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.shadow {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.back-wrap {
	position: relative;
	z-index: 1;
}

.back {
	cursor: pointer;
	left: 5%;
	position: absolute;
	top: 5%;
	width: 50px;
	height: 50px;
	z-index: 1;
}

.content {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100%;
	height: 100%;
	width: 100%;
	/* margin-top: 3%; */
}

.left {
	/* width: 100%; */
	height: 90%;
	padding-top: 4%;
	margin-left: 9%;
	box-sizing: border-box;
	/*
	padding-top:5%;
	margin-left:9%; */
	/* display: flex;
	margin: auto 0;
	justify-content: right; */
	/* position: relative; */

	align-items: center;
	display: flex;
	justify-content: center;
	/* align-content: flex-start; */
}

.right {
	width: 80%;
	margin-top: 2rem;
	margin-bottom: 90px;
	background: #fbfbfb;
	overflow: hidden;
	border-radius: 1rem 1rem 0 0;
	display: flex;
	justify-content: center;
}

.right-box {
	/* width: 92%; */
	width: 100%;
	padding: 0 4%;
	box-sizing: border-box;
	overflow-y: scroll;
}

.unit {
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	margin-bottom: 3%;
	justify-content: space-between;
	font-family: text-en, serif;
}

ul {
	width: 100%;
	padding: 0 0 2%;
}

.title-box {
	padding-left: 3%;
}

.topbook {
	width: 8rem;
	vertical-align: bottom;
	margin-bottom: 40%;
}

.bottombook {
	width: 658px;
	height: 100px;
	margin-top: -13px;
}

.imgbook {
	margin-left: 6%;
}

.audio-article {
	background-image: url("../public/assets/bookAudio/bookshelf.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10%;
	padding-left: 4%;
	width: 72%;

	/* position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%); */
}

#home_article1 {
	height: auto;
	flex: unset;
	/* align-items: start; */
}

#home_article1 p {
	white-space: nowrap;
}

.audio-article img {
	margin-bottom: 3%;
	vertical-align: bottom;
	width: 7.5rem;
	margin-left: 5%;
}

.section {
	display: inline-block;
	width: 62%;
	/* height: 100%; */
}

.section p {
	padding-left: 8%;
	font-size: 0.9rem;
    white-space: nowrap;
}

button {
	border: none;
	border-radius: 0.5rem;
	color: white;
	cursor: pointer;
	font-size: 100%;
	margin-left: 8%;
	padding: 2%;
	position: relative;
	width: 20%;
	height: 14%;
	font-family: FZLTDHK--GBK1, serif;
	transform: scale(1);
	transition: transform 1s ease 0s;
}

button:hover {
	cursor: pointer;
	transition: .5s;
	transform: scale(1.05);
}

.color1 {
	color: #000;
}

.color2 {
	color: #444;
}

.color3 {
	color: #666;
}

.font1 {
	font-family: FZLTDHK--GBK1, serif;
}

.font2 {
	font-family: FZLTZHUNHK-GBK1, serif;
}

.title {
	/* display: flex;
	background: url("../public/assets/bookAudio/bookshelf.png") no-repeat bottom;
	background-size: contain;
	margin-right: 10%;
	padding-left: 3%;
	width: 70%; */

	background-image: url("../public/assets/bookAudio/bookshelf.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10%;
	padding-left: 3%;
	width: 70%;
}

.titlebook {
	margin-top: 10%;
	font-size: 1rem;
	color: #000;
	white-space: nowrap;
}

.titlebook:first-child {
	margin-top: 18%;
}

.titlecenter {
	margin-top: 10%;
	font-size: 0.8rem;
	color: #444;
}

.titlecenters {
	margin-top: 30px;
	font-size: 22px;
	color: #444;
}

.bottomtitle {
	color: #666;
	margin-top: 18%;
	font-size: 0.8rem;
	font-family: text-en, serif;
}

.list-play {
	width: 1.8rem;
}

.btn {
	background-color: #fbfbfb;
	position: absolute;
	/* bottom: constant(safe-area-inset-bottom);
	bottom: env(safe-area-inset-bottom); */

	bottom: 0;
	left: 0;
	width: 100%;
	height: 110px;

	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 30px;
	box-shadow: 0 -5px 8px rgba(25,18,16, .2);


}

.btn-box {
	width: 100%;
	box-sizing: border-box;
	/* margin: 0 40px; */
	display: flex;
	align-items: center;
	/* width: 100%; */
	justify-content: center;

}

/* .btn-left {
	height: 100%;
	display: flex;
	justify-content: end;
	align-items: center;
	padding-right: 2%;
} */

.btn-box-left {
	display: flex;
	align-items: center;
}

.btn-box .btn-wrap {
	/* margin-left: 6%; */
	cursor: pointer;
	display: inline-block;
	margin: 0 18px;
}

.btn-box .btn-wrap1 {
	margin: 0 17px;
}

.previousstep {
	width: 45px;
}

.fastforward {
	width: 42px;
}

.togglePlay {
	width: 58px;
}

.btn-box-right {
	display: flex;
	align-items: center;
}

.button-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 15px;
	font-family: FZLTZHUNHK-GBK1, serif;
	font-size: 14px;
}

.button-wrap1 {
	width: 30px;
}

.button-wrap2 {
	width: 49px;
}

.button-wrap3 {
	width: 33.08px;
}

.orderImg {
	width: 28px;
	/* margin-left: 1%;
	margin-bottom: 2%; */
}

.button-wrap span {
	margin-top: 4px;
}

.btn-box1 {
	width: 100%;
	box-sizing: border-box;
	margin: 0 150px;
	display: flex;
	align-items: center;
	/* width: 100%; */
	justify-content: space-between;
}

/* .btn-box1 img {
	cursor: pointer;
	display: inline-block;
	margin: 0;
} */

.repeat-progress {
	/* flex: 1; */
	width: 100%;
	/* margin-right: 50px; */
	/* border-radius: 1rem;
	margin: 0 0.5rem; */
	height: 60px;
}

.btn-box1 .btn-box-right {
	display: flex;
	align-items: center;
	margin-left: 50px;
}

.repeatTogglePlay {
	width: 60px;
	margin: 0 30px 6px 30px;
	display: inline-block;
}

/* .repeatTogglePlay:nth-child(2) {
	margin-left: 50px;
} */

/* .repeatTogglePlay1 {
	margin-left: 4rem;
} */

.information {
	list-style-type: none;
	width: 96%;
	background: #fff;
	border-radius: 0.5rem;
	margin-bottom: 2%;
	border: 0.15rem solid transparent;
	padding: 2%;
}

.information.active {
	border-color: #61bd66;
	/* 选中时的边框颜色 */
}

.information.active2 {
	border-color: #1e4ba6;
}

.information-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.information-box div {
	/* text-align: right; */
}

.lyric {
	text-align: left;
	font-size: 1.1rem;
	color: #333333;
	font-family: text-en, serif;
}

.time {
	display: flex;
	align-items: center;
	margin-top: 0.4rem;
}

.audio-time {
	width: 4rem;
	height: 1.2rem;
	display: flex;
	font-size: 0.8rem;
	align-items: center;
	justify-content: center;
	background: #fff4df;
	border-radius: 0.3rem;
	color: #ffb530;
	font-family: text-en, serif;
}

.imgtime {
	width: 0.8rem;
	margin-right: 10%;
}

.order-box {
	/* flex: 1; */
	display: flex;
	align-items: center;
	margin-left: 2%;
	font-family: text-cn, serif;
	cursor: pointer;
}

.download {
	width: 1.8rem;
	margin-right: 1.5%;
}



.container-box {
	background: #f7f7f7;
	border-radius: 150px;
	margin-top: 0.4rem;
}

.progress-container-box {
	/* flex: 1; */
	width: 51%;
	margin: 0 50px;
}

.audio-progress {
	background-color: transparent;
	vertical-align: middle;
	width: 100%;
	height: 20px;
	/* overflow: hidden; */
	margin-top: 7px;
}

.progress-time {
	display: flex;
	justify-content: space-between;
}

.progress-text {
	font-size: 14px;
	color: #333333;
	font-family: text-en, serif;
}

::-webkit-scrollbar {
	width: 0.5rem;
	height: 2rem;
}

::-webkit-scrollbar-thumb {
	background: #eee;
	border-radius: 100px;
}

::-webkit-scrollbar-track {
	background-color: #fbfbfb;
}

::-webkit-scrollbar-thumb {
	background-color: #fbfbfb;
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	/* height: 100px; */
	background-color: #eee;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #eee;
}

.font1 {
	font-family: FZLTDHK--GBK1, serif;
}

.font2 {
	font-family: FZLTZHUNHK-GBK1, serif;
}
</style>
